<template>
  <el-progress :percentage="currentPercentage" v-bind="$attrs"></el-progress>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

let props = defineProps({
  //进度条进度
  percentage: {
    type: Number,
    default: 0
  },
  //进度条是否有动画效果
  isAnimation: {
    type: Boolean,
    default: false
  },
  //动画时长
  time: {
    type: Number,
    default: 3000
  }
})

let currentPercentage = ref(0)
let emits = defineEmits(['loadingSuccess'])
onMounted(() => {
  if (props.isAnimation) {
   let timer = setInterval(() => {
      currentPercentage.value += 1
      if (currentPercentage.value >= props.percentage) {
        emits('loadingSuccess')
        clearInterval(timer)
      }
    }, props.time / props.percentage)
  } else {
    currentPercentage.value = props.percentage
  }
})


</script>

<style scoped lang="scss">
svg {
  width: 126px ;
  height: 126px ;
}

.el-progress {
  &.animate {
    animation-duration: 3s;
  }
  &.animate .el-progress-bar__inner {
    animation-duration: inherit;
    animation-name: progress-animation;
    animation-timing-function: linear;
  }
  @keyframes progress-animation {
    from {
      width: 0%;
    }
    to {
      width: 100%;
    }
  }
}


</style>